<template>
  <div class="wrap">
	<div class="list_img">
		<img :src="isMusicPlay?item.music.coverImgUrl:item.detail_img">
		<img @tap="handleMusicPlay" class="music_img" :src="isMusicPlay?'/static/images/music/music-start.png':'/static/images/music/music-stop.png'" alt="">
	</div>
    <div class="avatar_data">
  		<img :src="item.avatar">
  		<span>{{item.author}}</span>
  		<span>写于{{item.date}}</span>
  	</div>
  	<div class="list_title">
  		<h2>{{item.title}}</h2>
  	</div>
  	<div class="line_wrap">
		<div class="collection_share">
		    <img @tap="handleCollection" :src="isCollected?'/static/images/icon/collection.png':'/static/images/icon/collection-anti.png'" alt="">
		    <img @tap="handleShare" src="/static/images/icon/share-anti.png" alt="">
		</div>
		<span class="line"></span>
	</div>
  	<div class="list_desc">
  		<p>{{item.detail_content}}</p>
  	</div>
	<span class="ShareTextBtn" open-type="share">转发此文章</span>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data () {
    return {
		index:'',
		item:'',
		isCollected:false,
		isMusicPlay:false
    }
  },
  beforeMount() {
	this.index=this.$mp.query.index
	if(this.$store.state.listArray){
		this.item=this.listArray.list_data[this.index]
	}
	//加载之前判断是否收藏了本页面
	let oldStorage = wx.getStorageSync('index');
	if (!oldStorage) {
	    wx.setStorage({
	      key: 'index',
	      data: {}
	    });
	} else {
	    this.isCollected = (oldStorage[this.index]?true:false);
	}
	
	this.isMusicPlay=false;
  },
  computed:{
	  ...mapState(['listArray'])
  },
  methods:{
	  handleShare(){//分享按钮
	      wx.showActionSheet({
	        itemList: ["分享到朋友圈","分享到微博","分享给微信好友"], //按钮的文字数组，数组长度最大为6个,
	        itemColor: '#000000', //按钮的文字颜色,
	        success: res => {}
	      });
	  },
	  handleCollection(){//收藏按钮
	      this.isCollected = !this.isCollected;
	      let title = this.isCollected?'收藏成功':'取消收藏'
	      wx.showToast({
	        title: title, //提示的内容,
	        icon: 'success', //图标,
	        duration: 1000, //延迟时间,
	        mask: true, //显示透明蒙层，防止触摸穿透,
	        success: res => {}
	      });
	      //读取之前本地缓存的状态 查看是否收藏
	      let oldStorage = wx.getStorageSync('index');
	      oldStorage[this.index] = this.isCollected
	      //将本次设置的结果再缓存到本地
	      wx.setStorage({
	        key: 'index',
	        data: oldStorage
	      });
	  
	  },
	  handleMusicPlay(){//播放音乐按钮
	      this.isMusicPlay = !this.isMusicPlay;
	      let {dataUrl, title} = this.item.music
		  console.log(this.item.music)
	      if (this.isMusicPlay) {
	          wx.playBackgroundAudio({
	              dataUrl,
	              title
	          }) 
	      } else {
	          wx.pauseBackgroundAudio()
	      }
	  },
  },
}
</script>

<style>
	.wrap{
		display: flex;
		flex-direction: column;
	}
	.avatar_data{
		width: 100%;
		padding: 10rpx;
	}
	.avatar_data>img{
		width: 60rpx;
		height: 60rpx;
		border-radius:50% ;
		vertical-align:middle;
	}
	.avatar_data>span{
		margin-left: 10rpx;
		font-size: 28rpx;
		color:#333;
	}
	.list_title{
		padding: 10rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	.list_img{
		width: 100%;
		position: relative;
	}
	.list_img>img{
		width: 100%;
	}
	.list_desc>p{
		font-size: 32rpx;
		text-indent: 60rpx;
		line-height: 45rpx;
		padding:0 10rpx;
		letter-spacing: 2rpx;
		margin: 30rpx 0;
	}
	.collection_share {
	    float: right;
	    margin-right: 30rpx;
	}
	
	.collection_share img {
	    width: 90rpx;
	    height: 90rpx;
	    margin-right: 20rpx;
	}
	
	.line_wrap{
	    position: relative;
	}
	.line{
		background: #ccc;
		height: 1rpx;
		width: 90%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 5%;
		z-index: -1;
	}
	.ShareTextBtn{
		padding: 10rpx;
		border-radius: 10rpx;
		background: #fff;
		font-size: 28rpx;
		border: 1px solid #eee;
		width: 200rpx;
		margin: 0 auto;
		text-align: center;
	}
	.list_img>.music_img {
	    height: 60rpx;
	    width: 60rpx;
	    position: absolute;
	    top: 50%;
		transform: translateY(-50%);
	    left: 50%;
	    margin-left: -30rpx;
	}

</style>
